<template>
    <div class="modal-bg" v-show="show">
        <div class="modal-container">
            <div class="modal-header">
                {{ title }}
            </div>
            <div class="modal-main" >
                <div class="Solt1"  id="express_info_right">
                    <slot name="Solt1"></slot>
                   <span class="thekey" :data-clipboard-text="Theserver" @click="copythekey">复制</span>
                    <span class="copysucess" v-show="copyTheserver">复制成功</span>
                </div>
                <div>
                    <slot name="Solt2"></slot>
                    <span class="Theserver" :data-clipboard-text="Thekeys" @click="copy">复制</span>
                    <span class="copysucess" v-show="copyThekeys">复制成功</span>
                </div>
            </div>
            <div class="modal-footer">
                <button @click="hideModal">确认</button>
                <!-- <button @click="submit">确认</button> -->
            </div>
        </div>
    </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
    name: 'modal',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        Theserver:{
            type: String,
            default: '' 
        },
        Thekeys:{
            type: String,
            default: '' 
        }
    },
    data() {
        return {
            x: 0,
            y: 0,
            node: null,
            isCanMove: false,
            copyTheserver:false,
            copyThekeys:false
        }
    },
    mounted() {
        this.node = document.querySelector('.modal-container')
    },
    methods: {
        hideModal() {
            this.$emit('hideModal')
        },

        submit() {
            this.$emit('submit')
        },

        setStartingPoint(e) {
            this.x = e.clientX - this.node.offsetLeft
            this.y = e.clientY - this.node.offsetTop
            this.isCanMove = true
        },

        modalMove(e) {
            if (this.isCanMove) {
                this.node.style.left = e.clientX - this.x + 'px'
			    this.node.style.top = e.clientY - this.y + 'px'
            } 
        },

        cancelMove() {
            this.isCanMove = false
        },
        copythekey(){
            var clipboard = new Clipboard('.thekey')
                clipboard.on('success', e => {
                    console.log('复制成功')// 释放内存
                    this.copyTheserver = true
                    clipboard.destroy()
                })
                clipboard.on('error', e => {// 不支持复制
                    console.log('该浏览器不支持自动复制')// 释放内存
                    clipboard.destroy()
                })
        },
        copy() {
            var clipboard = new Clipboard('.Theserver')
                clipboard.on('success', e => {
                    console.log('复制成功')// 释放内存
                    clipboard.destroy()
                    this.copyThekeys = true
                })
                clipboard.on('error', e => {// 不支持复制
                    console.log('该浏览器不支持自动复制')// 释放内存
                    clipboard.destroy()
                })
            }
    }
}
</script>
<style scoped>
.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10;
}
.modal-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: fixed;
    width: 30%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.modal-header {
    height: 10%;
    background: #409EFF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10%;
    border-top: 1px solid #ddd;
}
.modal-footer button {
    width: 100px;
}
.modal-main {
    position: relative;
    width: 90%;
    height: 70%;
    margin: 0 auto;
}
.copys{
    cursor: pointer;
}
.thekey,.Theserver{
    cursor: pointer;
    display: inline-block;
    width: 80px!important;
    height: 30px!important;
    background: #e1e1e1;
    text-align: center;
    line-height: 30px!important;
    margin-left: auto;
}
.modal-main>div{
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding: 0;
    flex-wrap: wrap;
}
.modal-main>div>span{
    width: 100%;
}
.copysucess{
    width: 100%;    
    color: red;
    font-size: 12px;
}
</style>
